import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '图片列表',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        splashColor: Colors.transparent,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('图片列表'),
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          childAspectRatio: 4 / 3),
      children: List.generate(10, (index) {
        final imageURL = "https://picsum.photos/500/500?random=$index";
        return GestureDetector(
          onTap: () {
            Navigator.of(context)
                .push(PageRouteBuilder(pageBuilder: (ctx, anim1, anim2) {
              return FadeTransition(
                  opacity: anim1, child: ImageDetailPage(imageURL));
            }));
          },
          // 包裹Hero并指定tag属性，tag属性必须与目标界面的目标widget指定的相同
          child: Hero(
            tag: imageURL,
            child: Image.network(
              imageURL,
              fit: BoxFit.cover,
            ),
          ),
        );
      }),
    );
  }
}

// 图片详情页面
class ImageDetailPage extends StatelessWidget {
  final String imageUrl;

  ImageDetailPage(this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图片详情'),
      ),
      body: Center(
        child: GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
            },
            child: Hero(tag: imageUrl, child: Image.network(imageUrl))),
      ),
    );
  }
}
